/*
mixin file Provide WMS layer function， xyz layer function  WMTS layer（天地图）
*/
import XYZ from 'ol/source/XYZ'
import TileLayer from 'ol/layer/Tile'
import { Image as ImageLayer } from 'ol/layer'
import Static from 'ol/source/ImageStatic'
import TileWMS from 'ol/source/TileWMS'
// 图层 2000
import WMTS from 'ol/source/WMTS'
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import * as olExtent from 'ol/extent' // 范围信息
import * as olProj from 'ol/proj' // 坐标变换使用
// 地图 mbtiles（mvt-pbf）--需要安装ol-mapbox-style组件(cnpm install ol-mapbox-style)
// import {apply, applyStyle, applyBackground} from 'ol-mapbox-style';
// import { VectorTile as VectorTileLayer } from 'ol/layer';
// import { VectorTile as VectorTileSource } from 'ol/source';
// import { Polyline, MVT} from 'ol/format';
// import * as olTilegrid from 'ol/tilegrid';

import OSM from 'ol/source/OSM' // OSM联网测试层

export default {
  data () {
    return {
      // wmsLayer: null
    }
  },
  // watch: {
  //   // watch
  // },
  // mounted () {
  //   // mounted
  // },
  methods: {
    /**
     * @description 创建OSM的底图（联网测试用）
     * @param oMapInfo {object} 地图类型描述对象，指定{"srv":"osm", "url":""}}
     * @return {objecct} 新创建的osm层
     */
    createOSMLayer () { // oMapInfo
      // 
      const osmLayer = new TileLayer({
        source: new OSM()
      })
      return osmLayer
    },

    /**
     * @description 创建WMS格式的底图（地图配置数据为base或ext扩展）
     * @param oMapInfo {object} 地图类型描述对象，包含url字符串，layers使用的层名，format图形格式；地图类型：经典，夜视，影像，标绘
     *        地图配置文件 classic:{"base":{"url":"/wms/vmap0","layers": "basic", "format": "image/jpeg"}, "ext": {}},
     *        这里只接收base或ext的一个配置信息，如：{"url":"/wms/vmap0","layers": "basic", "format": "image/jpeg"}
     * @return {objecct} 新创建的wms层
     */
    createWMSLayer (oMapInfo, conf) {
      const wmsLayer = new TileLayer({ // ol/layer/tile
        source: new TileWMS({ // ol.source.TileWMS
          crossOrigin: 'anonymous',
          url: oMapInfo.url, // 地图服务URL url如：'http://192.168.0.139:21701/geowebcache/service/wms', /*
          params: {
            VERSION: '1.1.1',
            tiled: true,
            LAYERS: oMapInfo.layers, // 'hainan_gg_jiedao', // 使用的地图层jdLAYERS
            FORMAT: oMapInfo.format, // 'image/png', // 图形格式 options.format ? options.format : options.srs ? options.srs :
            SRS: conf.PCS // 'EPSG: 3857' ；projected coordinate system ；空间参照系（Spatial Reference System，简称 SRS）
          }
          // 【联网地图】
          // url: 'https://ahocevar.com/geoserver/wms', // https://ahocevar.com/geoserver/wms
          // params: { LAYERS: 'ne:ne', TILED: true }
        })
      })
      return wmsLayer
    },
    // destroyWMS () {}

    /**
     * @description 创建XYZ格式的底图
     * @param oMapInfo {object} 地图类型描述对象，包含url字符串，layers使用的层名，format图形格式；地图类型：经典，夜视，影像，标绘
     *        地图配置文件 classic:{"base":{"url":"/wms/vmap0","layers": "basic", "format": "image/jpeg"}, "ext": {}},
     *        这里只接收base或ext的一个配置信息，如：{"url":"/wms/vmap0","layers": "basic", "format": "image/jpeg"}
     * @return {objecct} 新创建的wms层
     */
    createXYZLayer (oMapInfo) {
      let nTileSize = oMapInfo.tileSize
      if (!nTileSize) {
        nTileSize = 256
      }
      const xyzLayer = new TileLayer({ // ol/layer/tile
        source: new XYZ({ // ol.source.XYZ
          crossOrigin: 'anonymous',
          tileSize: nTileSize,
          url: oMapInfo.url // http://192.168.1.121:31211/basemap/{z}/{y}/{x}.png
        })
      })
      return xyzLayer
    },

    /**
     * XYZ影像格式，影像版地图
     */
    createXYZLayer2 (oMapInfo) {
      const xyzLayer = new TileLayer({ // ol/layer/tile
        source: new XYZ({ // ol.source.XYZ
          crossOrigin: 'anonymous',
          tileUrlFunction: function (coordinate) {
            console.log(coordinate[0], coordinate[1], coordinate[2])
            var z = coordinate[0]
            var x = coordinate[1]
            // var y = Math.pow(2,z)-coordinate[2]
            var y = Math.pow(2, z) - coordinate[2] - 1
            // return "http://10.10.3.14:8070/basemap/" + z + "/" + x + "/" + y + ".jpg";
            return oMapInfo.url + z + '/' + x + '/' + y + '.jpg'
          }
          // url: oMapInfo.url 末尾需要带 / 如：http://192.168.1.121:31211/basemap/
        })
      })
      return xyzLayer
    },

    /**
     * @description 创建WMTS格式的底图（测试--天地图）
     * @param oMapInfo {object} 待定！无   地图类型描述对象，包含url字符串，layers使用的层名，format图形格式；地图类型：经典，夜视，影像，标绘
     *        地图配置文件 classic:{"base":{"url":"/wms/vmap0","layers": "basic", "format": "image/jpeg"}, "ext": {}},
     *        这里只接收base或ext的一个配置信息，如：{"url":"/wms/vmap0","layers": "basic", "format": "image/jpeg"}
     * @return {objecct} 新创建的wms层
     */
    createWMTSLayer () {
      const projection = olProj.get('EPSG:4326') // ol.proj
      console.log(projection)
      const projectionExtent = projection.getExtent() //  [-180, -90, 180, 90]
      console.log(projectionExtent)
      const size = olExtent.getWidth(projectionExtent) / 256 // ol.extent
      console.log(size)
      const resolutions = []
      for (let z = 2; z < 19; ++z) {
        resolutions[z] = size / Math.pow(2, z)
      }
      return new TileLayer({ // ol.layer.Tile
        source: new WMTS({ // ol.source.WMTS
          crossOrigin: 'anonymous',
          name: '中国矢量1-4级',
          url: 'http://t{0-6}.tianditu.com/vec_c/wmts?tk=ac0daf56728bbb77d9514ba3df69bcd3',
          layer: 'vec',
          style: 'default',
          matrixSet: 'c',
          format: 'tiles',
          wrapX: true,
          tileGrid: new WMTSTileGrid({ // ol.tilegrid.WMTS
            origin: olExtent.getTopLeft(projectionExtent), // ol.extent
            // resolutions: res.slice(0, 15),
            resolutions: resolutions,
            matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
          })
        })
      })
    },

    /**
     * @description 创建WMTS格式的底图（天地图影像）
     * @param oMapInfo {object} 地图类型描述对象--注意天地图的排列时zyx
     * @return {objecct} 新创建的wms层
     */
    createTdtImgLayer (oMapInfo) {
      return new TileLayer({ // ol.layer.Tile
        source: new XYZ({ // ol.source.XYZ
          // url: 'https://t3.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=17954de5411f5fba77d1e2c240cce081'
          // url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=f3152b7cfe966590ed786d2d772bbdb7'
          url: oMapInfo.url
        }),
        preload: Infinity
      })
    },

    /**
     * @description 创建WMTS格式的底图（天地图影像）
     * @param oMapInfo {object} 地图类型描述对象--注意天地图的排列时zyx
     * @return {objecct} 新创建的wms层
     */
    createTdtVecLayer (oMapInfo) {
      return new TileLayer({ // ol.layer.Tile
        source: new XYZ({ // ol.source.XYZ
          // url: 'https://t3.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=17954de5411f5fba77d1e2c240cce081'
          // url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=f3152b7cfe966590ed786d2d772bbdb7',
          url: oMapInfo.url,
          crossOrigin: 'anonymous'
        }),
        preload: Infinity
      })
    },

    /**
     * @description 创建vec的底图-https://www.freesion.com/article/265164325/
     * @param oMapInfo {object} 地图类型描述对象
     * @return {objecct} 新创建的地图层
     */
    createImageLayer (oMapInfo, conf) {
      
      const projection = olProj.get(conf.PCS) // 投影坐标
      const imageExtent = oMapInfo.extent // 位置尺寸
      return new ImageLayer({
        source: new Static({
          crossOrigin: 'anonymous',
          url: oMapInfo.url,
          projection: projection, // 'EPSG:3857',
          imageExtent: imageExtent,
          imageSmoothing: true
        })
      })
    },

    /**
     * @description 创建Image格式的底图
     * @param oMapInfo {object} 地图类型描述对象
     * @return {objecct} 新创建的地图层
     */
    createMapBoxLayer (oMapInfo) {
      
      // const projection = olProj.get(this.conf.PCS) // 投影坐标
      return new TileLayer({ // ol/layer/tile
        source: new XYZ({ // ol.source.XYZ
          crossOrigin: 'anonymous',
          url: oMapInfo.url // http://192.168.1.121:31211/basemap/{z}/{y}/{x}.png
        })
      })
    },

    /**
     * @description 创建地图基础层的入口
     * @param oMapInfo {object} 地图类型描述对象，地图发布类型srv，包含url字符串，layers使用的层名，format图形格式；地图类型：经典，夜视，影像，标绘
     *        地图配置文件 classic:{"base":{"url":"/wms/vmap0","layers": "basic", "format": "image/jpeg"}, "ext": {}},
     *        这里只接收base或ext的一个配置信息，如：{"url":"/wms/vmap0","layers": "basic", "format": "image/jpeg"}
     * @return {objecct} 新创建的地图层
     */
    createMapLayer (oMapInfo, conf) {
      const oMapLayer = null
      // 数据有效性检查
      if (Object.keys(oMapInfo).length === 0) { // (!oMapInfo || JSON.stringify(oMapInfo) === '{}')
        console.log('当前地图配置文件为空！')
        return null
      }
      // const sMapType = oMapInfo.type
      // console.log(oMapInfo.srv)
      switch (oMapInfo.srv) {
        case 'wms':
          // 生成wms层并返回
          return this.createWMSLayer(oMapInfo, conf)
        case 'xyz':
          // 创建xyz方式的层
          
          return this.createXYZLayer(oMapInfo)
        case 'xyz2':
          // 创建xyz方式的层
          return this.createXYZLayer2(oMapInfo)
        case 'mvt':
          // 创建mapbox样式地图pbf（mvt暂不支持）
          return this.createMVTLayer(oMapInfo)
        case 'img':
          // 创建Image地图
          return this.createImageLayer(oMapInfo, conf)
        case 'tdt':
          // 测试天地图（测试）
          return this.createWMTSLayer()
        case 'tdtimg':
          // 测试天地图(影像)
          return this.createTdtImgLayer(oMapInfo)
        case 'tdtvec':
          // 测试天地图(矢量)
          return this.createTdtVecLayer(oMapInfo)
        case 'osm':
          // 测试天地图（测试）
          return this.createOSMLayer()
          // 创建mapBox地图
        case 'mapbox':
          return this.createMapBoxLayer(oMapInfo)
        default:
          return this.createWMSLayer()
      }
    }

    // switchImg (imgName = null) {
    //   console.log('图像地图不能显示边界框！')
    //   const imgObj = {
    //     extent: [0, 0, 700000, 1300000],
    //     url: '/mapres/maps/img/2000px-British_National_Grid.svg.png'
    //   }
    //   // const imgLay = this.createImageLayer(imgObj)
    //   if (this.baseMapLayer) {
    //     this.imap.removeLayer(this.baseMapLayer)
    //   }
    //   if (this.extMapLayer) {
    //     this.imap.removeLayer(this.extMapLayer) // extraMapLayer
    //   }
    //   this.baseMapLayer = this.createImageLayer(imgObj)
    //   this.imap.addLayer(this.baseMapLayer)
    //   this.baseMapLayer.setZIndex(0)
    // }

    // 当前方法
  }
}
